;(function ($,window,document,undefined){
	
	CP.ControlModule = function (){

		var _this = this;
		var html = '<div id="{0}" class="{1}"></div>';

		this.$el = null;
		this.displayImgModule = null;
		this.saveModule = null;
		this.uploadFromFacebookModule = null;
		this.uploadFromAssetsModule = null;
		this.shapeModule = null;

		this.callBackDashboardModule = null;

		this.init = function (scopeDashboardModule) {
			console.log('RIGHT INIT');
			this.callBackDashboardModule = scopeDashboardModule;

			html = html.format(MYLIB.constant.control_id,MYLIB.constant.control_class);
			this.$el = $(html);

			this.displayImgModule = new CP.DisplayImgModule();
			this.displayImgModule.init();

			this.saveModule = new CP.SaveCanvas();
			this.saveModule.init();

			this.uploadFromFacebookModule = new CP.UploadFromFacebookModule();
			this.uploadFromFacebookModule.init();

			this.uploadFromAssetsModule = new CP.UploadFromAssetModule();
			this.uploadFromAssetsModule.init();

			this.shapeModule = new CP.ShapeModule();

			this.renderLayout();
		}

		this.getElement = function () {
			return this.$el;
		}

	};

	CP.ControlModule.prototype.mainCanvas = null;

	CP.ControlModule.prototype.renderLayout = function () {
		var that = this;
		console.log('RENDER LAYOUT CONTROL ZONE');
		this.$el.append(this.displayImgModule.controller.view.getElement());
		this.$el.append(this.saveModule.getElement());
		this.$el.append(this.uploadFromFacebookModule.getElement());
		this.$el.append(this.uploadFromAssetsModule.getElement());

		this.shapeModule.init(this.callBackDashboardModule,function (){
			that.$el.append(that.shapeModule.controller.view.getElement());
		});

		this.$el.css({
			display : 'inline-block',
			'margin-left' : '15px',
			width : '17%'

		});

	}

	CP.ControlModule.prototype.renderCanvas = function () {
		this.mainCanvas.renderLayout();
	}



})(jQuery,window,document)